<script setup>
import {BodySharp} from '@vicons/ionicons5'
import {wu_ping} from '@/activity/wu_pin/wu_ping'
import {userStatus} from "@/pinia/userStatus"
import {defineProps, defineEmits} from 'vue'


const props = defineProps(['xian'])

const emit = defineEmits(['changeCome'])

const user = userStatus()
const user_info = user.load_user_info

// 达到 最大比例 需要献祭的灵力 （10万）
const max = 100000;

// 物品的品级
const probabilities = {
  A: 0.1,
  B: 0.2,
  C: 0.7
};

// 进行化物品
// 计算 灵力能够换得 物品
function hua_wu() {
  let random = Math.random();
  let cumulativeProbability = 0;

  // 奉献灵力占比的权重
  const power = user_info.ling_li / max
  // 判断获取物品的等级
  let rank = "Z"
  for (const item in probabilities) {
    cumulativeProbability += probabilities[item];
    // 根据权重减少获取概率
    if (random < cumulativeProbability * (power > 1 ? 1 : power)) {
      rank = item
      break
    }
  }

  const wu_ping_rank = wu_ping.filter(ping => {
    return ping.ping_jie == rank;
  })

  // 判断是否存在该等级的物品
  if (wu_ping_rank.length > 0) {
    // 如果灵力奉献小于 50% 获得 A 或者 B 等级的物品 扣减寿命
    if (power < 0.5) {
      switch (rank) {
          // A 扣减 15 年
        case "A" :
          user.life_lost(15);
          break;
          // B 扣减 5 年
        case "B" :
          user.life_lost(5);
          break;
      }
    }

    // 获取发放物品
    const rankIndex = getRandomInt(0, wu_ping_rank.length - 1)
    const goods = wu_ping_rank[rankIndex]
    // 发放物品
    user.add_goods(goods);
  } else {

  }
}

// 生成指定范围的 随机数
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function hui_dao_come(){
  emit('changeCome')
}

function hui_dao_xian(){
  props.xian()
}

</script>

<template>
  <div class="yun_main">
    <n-divider>试炼（灵矿）</n-divider>
    <div class="explain">
      <div class="dungeon_explain">天地初开，混沌未分时有一灵宝，在道则作用孕育而生。</div>
      <div class="dungeon_explain">后世传名为《聚宝盆》。</div>
      <div class="dungeon_explain">此宝吸收灵气可幻化万物，注入的灵力越多。</div>
      <div class="dungeon_explain">化物的品质越高。</div>
    </div>
    <div class="hua_wu">
      <n-button circle class="hua_wu_button" @click="hua_wu()">
        <template #icon>
          <n-icon>
            <BodySharp/>
          </n-icon>
        </template>
      </n-button>
    </div>
    <div class="inject_explain">
      <div class="dungeon_explain">天生万物说的就是一个有舍有得。</div>
      <div class="dungeon_explain">《聚宝盆》化物之能，需投入己身，奉献气海。</div>
      <div class="dungeon_explain">舍己之灵，为己化物，不取不夺，道之永恒。</div>
      <div class="dungeon_explain">献寿夺物，天赐之缘。</div>
    </div>
    <div class="fang_hui">
      <div>
        <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)" @click="hui_dao_xian()"> 修行 </n-gradient-text>
      </div>
      <div>
        <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)" @click="hui_dao_come()"> 试炼 </n-gradient-text>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.yun_main {
  width: 100%;
  position: relative;

  .dungeon_explain {
    font-family: "楷体", serif;
    font-size: 14px;
    width: 386px;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 9s steps(99, end),
    cursor-blink 3s step-end infinite alternate;
  }

  @keyframes typing {
    from {
      width: 0;
    }
  }

  @keyframes cursor-blink {
    50% {
      border-color: transparent;
    }
  }
}

.hua_wu {
  position: absolute;
  top: 233px;
  left: 38%;
}

.hua_wu_button {
  width: 98px;
  height: 98px;
}

.inject_explain {
  position: absolute;
  top: 366px;
}

.fang_hui {
  position: absolute;

  width: 100%;
  margin: 0 auto;

  top: 588px;

  display: flex;
  justify-content: space-around;
}

</style>
